<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="blank-translucent" />
		<meta content="telephone=no,email=no" name="format-detection" />
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/jquery.2.1.min.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/hejia-latest.min.js"></script>
		<script type="text/javascript" src="js/vconsole.min.js"></script>
		<script type="text/javascript" src="js/CryptoJS.js"></script>
		<script type="text/javascript" src="js/deviceCodec.js"></script>
		<script type="text/javascript" src="js/jQuery.md5.js"></script>
		<script type="text/javascript" src="js/flexible.js"></script>
		<title>锁</title>
	</head>
	<body>
	<div id="workboxs">
		<!--门锁主页面-->
		<div id="main" >
			<div class="upper">
				<p class="back tl_back" hidden>&nbsp;</p>
				<p class="title">智能门锁</p>
			</div>
			<div class="synchronize">数据同步 <span id="elecDate">--</span> <!--<span id="lineState">--</span>--></div>
			<div class="lockImg">
				&nbsp;<img src="img/lock.png" />
			</div>
			<div class="electric">
				<div class="bar">
					<div class="elecbarbox">
						<p class="barwidth"></p>
					</div>
					<img src="img/elec.png" />
				</div> <span id="elec">--</span>%
				
				<p class="lowElec"><img src="img/tip.png" />电池低电量，请及时更换</p>
			</div>
			<div class="tab">
				<p id="ysgl"><img src="img/key.png" />钥匙管理</p>
				<p id="lsmm"><img src="img/pwd.png" />临时密码</p>
			</div>
			<div class="history">
				<p class="head"><span class="selectDate"></span> <span class="week"></span><img class="selectBtn" src="img/weekSelect.png" /></p>
				<div class="hisList swiper-container">
					<ul class="swiper-wrapper">
	<!--					<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide alarm">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>
						<li class="swiper-slide">
							<p><em></em>11:12:12</p>
							<p>密码解锁 开锁</p>
						</li>-->
					</ul>
				</div>
				<p class="noinfo">
					<img  src="img/nohistory.png" />
					<span>暂无日志</span>
				</p>
			</div>
			<div class="datePicker">
				<p class="title">
					<span><img src="img/cancel.png" /></span>
					<span>选择日期</span>
					<span>确定</span>
				</p>
				<div class="pickerBox">
					<div class="year swiper-container">
						<ul class="swiper-wrapper">
						</ul>
					</div>
					<div class="month swiper-container">
						<ul class="swiper-wrapper">
						</ul>
					</div>
					<div class="day swiper-container">
						<ul class="swiper-wrapper">
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="manage">
		<div class="upper">
			<p class="back tl_back">&nbsp;</p>
			<p class="title">钥匙管理</p>
		</div>
		<div id="pwd" class="card">
			<p>
				<span><img src="img/keys.png" />密码管理</span>
				<span><b>0</b>组密码</span>
			</p>
			
		</div>
		<div id="finger" class="card">
			<p>
				<span><img src="img/finger.png" />指纹管理</span>
				<span><b>0</b>组指纹</span>
			</p>
			
		</div>
		<div id="card" class="card">
			<p>
				<span><img src="img/card.png" />门卡管理</span>
				<span><b>0</b>张门卡</span>
			</p>
			
		</div>
	</div>
	<div class="setPage" id="public">
		<div class="upper">
			<p class="back tl_back">&nbsp;</p>
			<p class="title">密码管理</p>
<!--			<p class="add">添加</p>-->
		</div>
		<div class="cardList" id="list5">
			<li class="list">
				<span class="id">01</span>
				<span class="name"></span>
				<span class="editDate">2021-09-15</span>
			</li>
		</div>
		<div class="swiper-pagination setTab setTab1"></div>
		<div class="swiper-pagination setTab setTab2"></div>
		<div id="swiper" class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" id="list1">
				</div>
				<div class="swiper-slide" id="list2">

				</div>
			</div>
		</div>
		<div id="swiper1" class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide" id="list3">
					<!-- <div style="width: 100%;height: 5.8rem;border: 0.01rem solid;margin-top: 0.2rem;">1</div>
					<div style="width: 100%;height: 5.8rem;border: 0.01rem solid;margin-top: 0.2rem;">1</div>
					<div style="width: 100%;height: 5.8rem;border: 0.01rem solid;margin-top: 0.2rem;">1</div>
					<div style="width: 100%;height: 5.8rem;border: 0.01rem solid;margin-top: 0.2rem;">1</div>
					<div style="width: 100%;height: 5.8rem;border: 0.01rem solid;margin-top: 0.2rem;">1</div> -->
				</div>
				<div class="swiper-slide" id="list4">
					<!-- <div style="width: 100%;height: 5.8rem;border: 0.01rem solid;margin-top: 0.2rem;">2</div>
					<div style="width: 100%;height: 5.8rem;border: 0.01rem solid;margin-top: 0.2rem;">2</div> -->
				</div>
			</div>
		</div>
	</div>
	
	<div class="setPage" id="lsmmpage">
		<div class="upper">
			<p class="back tl_back">&nbsp;</p>
			<p class="title">临时密码</p>
		</div>
		<div id="pwdList"></div>
		<div class="temporary temporaryList">
			<div class="temporaryPwd">
				<p class="tpwd">
					<span>1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
					<span>5</span>
					<span>6</span>
				</p>
				<p id="copy" class="copy">
					<img  src="img/copy.png"/>
					<input id="pwdInput" type="text" />
				</p>
				<p style="padding-top: 40px;" class="validity val">密码将于5分钟之后失效</p>
				<p class="validity validityno" style="width: 4.52rem;">使用前，请先在门锁上输入86#唤醒门锁，再根据门锁语音提示输入临时密码</p>
			</div>
		</div>
	<!--<footer>
						<p id="share">
				<img src="img/wx.png" />分享至微信
			</p>
			<!-- <p id="copy">
				<img src="img/copy.png" />
				<input id="pwdInput" type="text" />
			</p> 
		</footer>-->
		<div class="copyadd">添加</div>
		<div class="toast"> <span class="toasttxt"></span> </div>
	</div>
	<div class="setPage" id="lsmmadd">
        <div class="upper">
			<p class="back tl_back">&nbsp;</p>
			<p class="title">临时密码</p>
		</div>
		<div class="content">
			<div class="no_content">
				<img src="img/nohistory_blue.png" alt="">
				<span>暂无内容</span>
			</div>
			<div class="add_content">立即添加</div>
		</div>
	</div>
	<div class="setPage" id="lsmmtime">
        <div class="upper">
			<p class="back tl_back">&nbsp;</p>
			<p class="title">添加临时密码</p>
		</div>
        <div class="deadline">
			<span class="deadtime">请选择密码有效期</span>
			<div class="time_deadline">
				<form action="">
					  <label>
						<input type="radio" name="sex" value="5" checked="checked" />
						<span>5分钟</span>
					  </label>
					  <label class="towtime">
						<input type="radio" name="sex" value="10" />
						<span>10分钟</span>
					  </label>
					  <label>
						<input type="radio" name="sex" value="20" />
						<span>20分钟</span>
					  </label>
				</form>
			</div>
			<div class="deadlinebtn">保存</div>
		</div>
	</div>
	
	
	<div class="setPage" id="edit">
		<div class="upper">
			<p class="back tl_back">&nbsp;</p>
			<p class="title">详情</p>
		</div>
		<div class="box">
			<p>
				<span>序号</span>
				<span id="id">01</span>
			</p>
			<p style="display: none;">
				<span>ID</span>
				<span><input type="text" id="userName" /></span>
			</p>
			<p>
				<span>创建时间</span>
				<span id="time">2021/10/10</span>
			</p>
		</div>
<!--		<div class="delete">删除指纹</div>
		<div class="deleteWrapper">
			<p>确定要删除密码？</p>
			<p>删除密码</p>
			<p>取消</p>
		</div>-->
	</div>
	<div class="toast"> <span class="toasttxt"></span> </div>
	<div id="mask"></div>
	<div id="mb"></div>
	<div class="wrapper">
		<img class="errorClose" src="img/cancel.png" />
		<img class="error" src="img/error.png" />
		<p class="errorInfo">电池低电量，请及时更换</p>
		<p class="errorTip">电量低于25%的时候，为了保证锁体基础功能能够正常使用，开锁、报警、电量等最新信息不会上报且不会在APP上展示，需要用户尽快更换电池。</p>
	</div>
</body>
<script type="text/javascript" src="js/action.js"></script>
</html>